.flex {
  display: flex;
  &-1 {
    flex: 1;
  }

  &-2 {
    width: 50%;
    flex: 0 0 50%;
  }

  &-3 {
    width: 33.333%;
    flex: 0 0 33.333%;
  }

  &-4 {
    width: 25%;
    flex: 0 0 25%;
  }

  &-column {
    @extend .flex;
    flex-direction: column;
  }

  &-wrap {
    @extend .flex;
    flex-wrap: wrap;
  }

  &-ac {
    @extend .flex;
    align-items: center;
  }

  &-ae {
    @extend .flex;
    align-items: flex-end;
  }

  &-as {
    @extend .flex;
    align-items: stretch;
  }

  &-jc {
    @extend .flex;
    justify-content: center;
  }

  &-je {
    @extend .flex;
    justify-content: flex-end;
  }

  &-jsb {
    @extend .flex;
    justify-content: space-between;
  }

  &-jsa {
    @extend .flex;
    justify-content: space-around;
  }

  &-jc-ac {
    @extend .flex-jc;
    @extend .flex-ac;
  }
}
